<template>
    <div class="jx-content aa" style="margin-top:0; padding:30px 30px;">
        <div v-if="content =='' ||  show" >
            <div class="fr saveBtn">
                <!-- <button class="button-style" @click="look" style=" margin-right:15px" ></button> -->
                <!-- <button class="button-style" @click="submitFn" >保存并预览</button> -->
                <div class="fr right-icon upload-btn">

                <!-- 二期新增 -->
                <!-- <button class="button-style fl upload-btn" style="margin-right: 10px;">
                    Word版上传
                    <input id="upload-file-input" type="file" @change="getFile">
                </button> -->
                    <span class="word-upload">
                        <i class="iconfont icon-tubiaozhizuomoban2"></i>
                        <input id="upload-file-input" type="file" @change="getFile" title="Word上传">
                    </span>
                    <span>
                        <i class="iconfont icon-baocun2" @click="submitFn"></i>
                    </span>
                </div>
            </div>
            <div class="ediator">
                    <mavonEditor ref="Materials" class="ediator-ev"></mavonEditor>
            </div>
        </div>
        <div v-if="content != '' && !show">
            <div class="fr">
                <!-- <button class="button-style saveBtn" @click="repeatFn" v-if="content != '' ">修改</button> -->
                <i class="iconfont icon-icon_edit"  @click="repeatFn" v-if="content != '' "></i>
           </div>
           <div class="iframse">
                 <!-- <iframe :src="content" width="1100" height="500" class="markdown-body demo"  frameborder="0" scrolling="auto" id="iframeId"  style='overflow-x:hidden'></iframe> -->
                 <!-- <iframe :src="content" width="1100" :height="hei"  id="myiframe"  height="500px"  frameborder="0" scrolling="no"  ></iframe> -->
                <div class="markdown-body editormd-preview-container" v-html="markHtml"></div>
           </div>
        </div>
    </div>
</template>

<script>
    import mavonEditor from "../../../components/mavonEditor";
    export default {
        components: { mavonEditor },
        data() {
            return {
                //markdown内容
                 markHtml:'',
                //内容
                content:'',
                //初始高度
                hei:0,
                show:'',
                //课程id
                courseId:'',
                //章节id
                chapterId:'',
            }
        },

        mounted () {
            this.chapterId = this.$localstorage.getLocalStorage('chapterInfoData').chapterId
            this.courseId = this.$localstorage.getLocalStorage('setCourseId')
            //let screenHeight=document.documentElement.scrollHeight || document.body.scrollHeight;
            //this.hei = screenHeight
            this.init()
             // 初始化页面高度
            $('.ediator-ev').css({
                'height': $(window).height() - 400 + 'px'
            })
             $('.ediator-ev .v-note-wrapper').css({
                'height': '100%'
            })
        },
        methods:{
            init(){
                let self = this
                self.$http.get('/tes/course/'+ self.courseId+'/chapter/'+self.chapterId+'/make/resource?types=4').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.preparationMaterials.displayVersion.length>0){
                           self.content = res.data.preparationMaterials.displayVersion[0].htmlContent
                           self.markHtml = res.data.preparationMaterials.displayVersion[0].htmlContent
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //保存并提交
            submitFn(){
                let self = this
                let editorContent = this.$refs.Materials.value;
                const loading = this.$loading({
                    lock: true,
                    text: '文件保存中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.chapterId+'/resource-online?resourceType=4',{
                     name:'备课材料',
                     content:editorContent,
                     htmlContent: self.$refs.Materials.getRender()
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        loading.close()
                        self.init()
                        self.show=false
                        self.content=''
                       // window.location.reload();// 刷新好使
                    }else{
                        self.$message.error(res.message)
                        loading.close()
                    }
                })
            },

            //修改
            repeatFn(){
                this.show=true
                this.contentFn()
            },
            //获取编辑器内容
            contentFn(){
                let self = this
                self.$http.get('/tes/course/'+ self.courseId+'/chapter/'+self.chapterId+'/make/resource?types=4').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.preparationMaterials.creativeVersion.length>0){
                            self.$nextTick(function(){
                               self.$refs.Materials.value= res.data.preparationMaterials.creativeVersion[0].content
                            })
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            // 二期 新增上传
            getFile($event) {
                let self = this

                let fileType = $event.target.files[0].name

                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                if( fileType.toLowerCase() != "docx"){
                    self.$message.error('请上传docx文件')
                    return
                }
                const loading = self.$loading({
                    lock: true,
                    text: '文件上传中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let arr = [];
                let formData = new FormData();

                formData.append('file', $event.target.files[0]);

                self.$http.post('/tes/file/word2markdown', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        loading.close()
                        self.$nextTick(function(){
                            self.$refs.Materials.value = res.data
                        })
                        $event.target.value = ''
                    }else{
                        loading.close()
                        $event.target.value = ''
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }

</script>

<style scoped>
    .ediator-ev>>>.v-note-wrapper {
        height: 500px;
        z-index: 1;
    }
    .ediator-ev>>>.v-note-wrapper.fullscreen{
        height: auto!important;
    }
    .ediator-ev>>>.fullscreen{
       top: 60px;
    }
</style>
<style scoped lang="scss">
    @import "./../../../styles/layout/color_variables";
    .jx-content{
        margin-top: 0px;
        .ediator{
            clear: both;
            padding-top: 30px;
        }
        .upload-btn{
            // position: relative;
            span{
                &.word-upload{
                    position: relative;
                    float: left;
                    width: 28px;
                    height: 28px;
                    overflow: hidden;
                    margin-right: 10px;
                }
            }
            #upload-file-input{
                position: absolute;
                left: 5px;
                opacity: 0;
                height: 30px;
                top: 3px;
                width: 24px;
                cursor: pointer;
            }
            .icon-tubiaozhizuomoban2{
                font-size: 30px;
                color: #4d73c0;
                vertical-align:-6px;
                &:hover{
                    color: #385899;
                }
            }
        }
        .btn-center{
            text-align: center;
            padding: 20px 0;
        }
        .iframse{
            clear: both;
            padding-top: 10px;
            width: 1120px;
        }
        .saveBtn{
        // margin-top: 30px;
        }
        .icon-baocun2{
            color: #4d73c0;
            font-size: 22px;
            vertical-align: text-top;
            margin-left: 5px;
            cursor: pointer;
            &:hover{
                color: #385899;
            }
        }
        .icon-icon_edit{
            color: #4d73c0;
            font-size: 22px;
            cursor: pointer;
        }

    }
</style>
